<template>
  <div class="goods-list">
    <Pane>
      <span slot="title">商品列表</span>
      <section slot="content">
        <el-table :data="goodsData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品ID:">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品名称:">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属分类:">
                      <span>{{ props.row.category }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品价格:">
                      <span>{{ props.row.price }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品图片:">
                      <span>{{ props.row.imgUrl }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="创建时间:">
                      <span>{{ props.row.ctime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品评价:">
                      <span>{{ props.row.rating }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品销量:">
                      <span>{{ props.row.sellCount }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品描述:">
                      <span>{{ props.row.goodsDesc }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
          <el-table-column prop="category" label="所属分类" width="180"></el-table-column>
          <el-table-column prop="price" label="商品价格"></el-table-column>
          <el-table-column prop="imgUrl" label="商品图片">
            <img
              src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2120156707,3168191970&fm=26&gp=0.jpg"
              alt
              style="width:60px ;height:60px"
            />
          </el-table-column>
          <el-table-column prop="goodsDesc" label="商品描述" width="240"></el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="goodsEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="goodsDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 弹出框 -->
        <el-dialog title="订单编辑" :visible.sync="dialogFormVisible">
          <el-form :model="goodsForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品ID:">
                  <el-input v-model="goodsForm.id" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品名称:">
                  <el-input v-model="goodsForm.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属分类:">
                  <el-input v-model="goodsForm.category" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品价格:">
                  <el-input v-model="goodsForm.price" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品图片:">
                  <el-input v-model="goodsForm.imgUrl" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间:">
                  <el-input v-model="goodsForm.ctime" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品评价:">
                  <el-input v-model="goodsForm.rating" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品销量:">
                  <el-input v-model="goodsForm.sellCount" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品描述:">
                  <el-input v-model="goodsForm.goodsDesc" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="goodsChangeSave">确 定</el-button>
          </div>
        </el-dialog>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane.vue'
import { getGoodsList, delGoods, editGoods } from '@/api/goods.js'
import moment from 'moment'
export default {
  name: 'GoodsList',
  props: {},
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      name: '',
      // 商品分类
      category: '',
      goodsData: [],
      total: 0,
      dialogFormVisible: false,
      goodsForm: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const res = await getGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      this.goodsData = res.data
      this.goodsData.forEach(v => {
        v.ctime = moment(v.ctime).format('YYYY-MM-DD HH:MM:SS')
      })
      this.total = res.total
      // console.log(res)
    },
    goodsEdit(row) {
      console.log(row)
      this.dialogFormVisible = true
      this.goodsForm = row
    },
    async goodsDel(id) {
      console.log(id)
      const { code } = await delGoods({ id: id })
      // console.log(res)
      if (code === 0) {
        this.init()
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.init()
    },
    async goodsChangeSave() {
      this.dialogFormVisible = false
      await editGoods({
        name: this.goodsForm.name,
        category: this.goodsForm.category,
        price: this.goodsForm.price,
        imgUrl: this.goodsForm.imgUrl,
        goodsDesc: this.goodsForm.goodsDesc,
        id: this.goodsForm.id
      })
      // console.log(code)
    }
  },
  components: {
    Pane
  }
}
</script>

<style scoped >
.goods-list >>> .el-form-item__content {
  margin: 0 5px;
}
.goods-list >>> .el-table__body td {
  padding: 0;
}
</style>
